import styled from '@emotion/styled'
import { Button, Dropdown, Menu } from 'antd'
import { logout } from 'utils/auth-provider'
import { Row } from 'components/lib'
import { useAuth } from 'context/auth-context'
import React, { useState } from 'react'
import ProjectList from 'screens/ProjectList'
// import softwareLog from './assets/software-logo.svg'
import { ReactComponent as SoftwareLogo } from './assets/software-logo.svg'
import { Navigate, Route, Router, Routes } from 'react-router'
import ProjectScreen from 'screens/Project'
import { resetRouter } from 'utils'
import { ProjectModal } from 'screens/ProjectList/projectModal'
import { ProjectPopover } from 'components/projectPopover'
import { UserPopover } from 'components/userPopover'


export default function AuthenticatedApp() {
  // const [projectModalOpen,setProjectModalOpen] = useState(false)
  // const value:any = undefined
  return (
    <Container>
      {/* 自己设置的错误 */}
      {/* {value.notExist} */}
      {/* <PageHeader setProjectModalOpen={setProjectModalOpen}></PageHeader> */}
      <PageHeader></PageHeader>
      {/* <Button onClick={()=> setProjectModalOpen(true)}>打开</Button> */}
      <Main>
        <Routes>
          {/* <Route path='/projects' element={<ProjectList setProjectModalOpen={setProjectModalOpen}/>}></Route> */}
          <Route path='/projects' element={<ProjectList/>}></Route>
          <Route path='/projects/:projectid/*' element={<ProjectScreen />}></Route>
          <Route path='/' element={<Navigate to={'/projects'}></Navigate>}></Route>
        </Routes>
      </Main>
      {/* <ProjectModal projectModalOpen={projectModalOpen} onClose={()=>setProjectModalOpen(false)}></ProjectModal> */}
      <ProjectModal></ProjectModal>
    </Container>
  )
}

// const PageHeader = (props:{setProjectModalOpen:(isOpen:boolean) => void}) => {
const PageHeader = (props:{}) => {
 
  return (
    <Header>
      <HeaderLeft gap={true}>
        {/* <img src={softwareLog} alt="" /> */}
        <Button style={{padding:'0'}} type='link' onClick={resetRouter}>
          <SoftwareLogo width={'18rem'} color={'rgb(38,132,255)'} height={'5rem'} />
        </Button>
        {/* <ProjectPopover setProjectModalOpen={props.setProjectModalOpen} /> */}
        <ProjectPopover />
        <UserPopover />
      </HeaderLeft>
      <HeaderRight>
        <User></User>
      </HeaderRight>
    </Header>
  )
}

const User = ()=>{
  const { logout, user } = useAuth()
  return(
    <Dropdown overlay={<Menu>
      <Menu.Item key={'logout'}>
        <Button type={'link'} onClick={logout}>登出</Button>
      </Menu.Item>
    </Menu>}>
      <Button type={'link'} onClick={e => e.preventDefault()}>
        Hi,{user?.name}
      </Button>
    </Dropdown>
  )
}


/**
 * grid 和 flex 各自的应用场景。
 * 1.要考虑,一维布局 还是 二维布局
 * 一般来说,一维布局用flex，二维布局用grid
 * 2.是从内容出发，还是从布局出发？
 * 从内容出发：你先有一组内容（数量一般不固定），然后希望他们均匀的分布在容器中。由内容自己的大小决定占据的空间。
 * 从布局出发：先规划网格（数量一般比较固定），然后再把元素往里填充。
 * 从内容出发，用flex。
 * 从布局出发。用gird
 */

// const Container = styled.div`
//   /* display: grid; */
//   grid-template-rows:  6rem 1fr 6rem;
//   height: 100%;
// `
// // // gred-area 用来给grid子元素起名字
// const Header = styled.header`
//   box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
//   padding: 3.2rem;
//   grid-area: header;
//   display: flex;
//   flex-direction: row;
//   align-items: center;
//   justify-content: space-between;
// `
// const HeaderLeft = styled(Row)``
// const HeaderRight = styled.div``
// const Main = styled.main`
//   display: flex;
//   overflow: hidden;
// `


// temporal dead zone(暂时性死区)
const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`;

// grid-area 用来给grid子元素起名字
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div`
  margin-left:70vw;
`;
const Main = styled.main`
  /* display: flex; */
  overflow: hidden;
`;
